import React from 'react';

interface FileTypeIconProps {
  fileName: string;
  className?: string;
}

export function FileTypeIcon({ fileName, className = "w-5 h-5" }: FileTypeIconProps) {
  const getFileExtension = (name: string): string => {
    const lastDot = name.lastIndexOf('.');
    return lastDot > 0 ? name.substring(lastDot + 1).toLowerCase() : '';
  };

  const extension = getFileExtension(fileName);
  const category = (() => {
    const image = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
    const video = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'];
    const audio = ['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'];
    const document = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf'];
    const archive = ['zip', 'rar', '7z', 'tar', 'gz', 'tgz'];
    const exe = ['exe'];
    if (extension === 'json') return 'json';
    if (image.includes(extension)) return 'image';
    if (video.includes(extension)) return 'video';
    if (audio.includes(extension)) return 'audio';
    if (document.includes(extension)) return 'document';
    if (archive.includes(extension)) return 'archive';
    if (exe.includes(extension)) return 'exe';
    return 'unknown';
  })();
  const getDocumentIcon = (ext: string) => {
    const map: Record<string, string> = {
      txt: 'txt.png',
      pdf: 'pdf.png',
      doc: 'doc.png',
      docx: 'doc.png',
      xls: 'excel.png',
      xlsx: 'excel.png',
      ppt: 'ppt.png',
      pptx: 'ppt.png',
      json: 'json.png'
    };
    return `/images/${map[ext] || 'unknown.png'}`;
  };

  const pickIconSrc = (): string => {
    switch (category) {
      case 'image':
        return '/images/image.png';
      case 'video':
        return '/images/video.png';
      case 'audio':
        return '/images/audio.png';
      case 'json':
        return '/images/json.png';
      case 'document':
        return getDocumentIcon(extension);
      case 'archive':
        return '/images/zip.png';
      case 'exe':
        return '/images/exe.png';
      default:
        return '/images/unknown.png';
    }
  };

  const renderIcon = () => {
    const src = pickIconSrc();
    return <img src={src} alt={category} className={className} />;
  };

  return (
    <div className="flex-shrink-0">
      {renderIcon()}
    </div>
  );
}